<template>
	<div class="comment">
		<div class="social-section" >
			<div id="gitalk-container" ></div>
			<!-- <div id="SOHUCS" :sid="type+postId"></div> -->
		</div>
	</div>
</template>


<script type="text/ecmascript-6">
export default {
	props: {
		type: String,
		postId: Number
	},
	components: {
	},
	watch: {
		/* postId (value) {
			this.show = value
			this.$nextTick(() => {
				// eslint-disable-next-line no-undef
				var gitalk = new Gitalk({
					clientID: '49bf166e152ab0dacfac',
					clientSecret: '271986592e263a0befc3eb2e6d4c8c7da101d420',
					repo: 'yr',
					owner: 'Lang-Zh',
					labels: [this.type],
					admin: ['Lang-Zh'],
					id: location.href, // Ensure uniqueness and length less than 50
					distractionFreeMode: false // Facebook-like distraction free mode
			})
				gitalk.render('gitalk-container')
			})
		} */
	},
	mounted() {
		this.$nextTick(() => {
			// eslint-disable-next-line no-undef
			var gitalk = new Gitalk({
				clientID: '49bf166e152ab0dacfac',
				clientSecret: '271986592e263a0befc3eb2e6d4c8c7da101d420',
				repo: 'yr',
				owner: 'Lang-Zh',
				labels: [this.type],
				admin: ['Lang-Zh'],
				id: location.href, // Ensure uniqueness and length less than 50
				distractionFreeMode: false // Facebook-like distraction free mode
		})
			gitalk.render('gitalk-container')
		})
	}
}
</script>

<style lang="stylus" scoped="scoped">
.comment
	margin-top 15px
	background-color #fff
	padding 0px 20px 10px
	border-radius 10px
	box-shadow 0 0 0 1px rgba(0,0,0,.02), 0 4px 10px rgba(0,0,0,.06)
</style>
